<style lang="scss" scoped>
    @import './custom-screening.scss';
    .check-item{
        @include checkItem;
    }
    .radio-group{
        height: 100%;
        display: flex;
        align-items: center;
        flex-wrap:wrap;
    }
</style>
<template>
    <div class="radio-group">
        <button class="ui button mini check-item" type="button"
            v-for="(item, index) in value"
            :key="index"
            :class="{primary:item.id == modelId, basic:item.id!=modelId}"
            @click="toggleCheck(index)"
            :disabled="isDisabled">

            {{item.label || item.id}}

        </button>
    </div>
</template>
<script>
    export default {
        name:'screening-radio',
        props:{
            value:{
                type:Array,
                default:function(){
                    return []
                }
            },
            label:{
                type:String,
                default:''
            },
            modelId:{
                type:String,
                default:''
            },
            required: {
              type: Boolean,
              default: false
            }
        },
        computed:{
            isDisabled(){
                return !this.$listeners['update:modelId']
            }
        },
        methods:{
            toggleCheck(index){
                if (this.value[index].id == this.modelId) {
                  if (this.required) return
                    this.clear()
                }else{
                    this.$emit('update:modelId', this.value[index].id + '')
                    this.$emit('change', this.value[index].id + '')
                }
            },
            clear(){
                this.$emit('change', '')
                this.$emit('update:modelId', '')
            }
        },
        mounted() {
            // 监听事件
            this.$eventHub.$on('ui-screening:reset', this.clear)
        },
        beforeDestroy() {
            this.$eventHub.$off('ui-screening:reset', this.clear)
        }
    }
</script>
